<template>
  <div class="order">
    <BaseHeader :navs="navs" :activeNav="activeNav" @nav-change="activeNav = $event" />

    <div class="container">
      <!-- Breadcrumb -->
      <div class="breadcrumb">
        <span>首页</span>
        <span class="separator">></span>
        <span>考证指南</span>
        <span class="separator">></span>
        <span>无人机技能认证</span>
        <span class="separator">></span>
        <span>CAAC > </span>
        <span class="current">初级课程</span>
      </div>

      <!-- Course Info Section -->
      <div class="course-info">
        <div class="course-left">
          <img src="@/assets/index/orderIMG.png" alt="Drone flying over forest" class="course-image" />
        </div>
        <div class="course-right">
          <h1 class="course-title">初级课程 (CAAC)</h1>
          <div class="course-price">
            <span class="price-label">价格：</span>
            <span class="price-amount">¥998</span>
          </div>
          <div class="course-meta">
            <div class="meta-item">
              <span class="meta-label">主讲老师：</span>
              <span class="meta-value">张三</span>
            </div>
            <div class="meta-item">
              <span class="meta-label">课程时间：</span>
              <span class="meta-value">购买365天有效</span>
            </div>
          </div>
          <div class="course-actions">
            <button class="btn-consult" @click="handleConsult">咨询客服</button>
            <button class="btn-buy" @click="handlePurchase">立即购买</button>
          </div>
        </div>
      </div>

      <!-- Course Content Section -->
      <div class="course-content">
        <div class="content-tabs">
          <div v-for="tab in tabs" :key="tab.id" :class="['tab-item', { active: activeTab === tab.id }]"
            @click="activeTab = tab.id">
            {{ tab.name }}
          </div>
        </div>

        <div class="content-body">
          <div v-if="activeTab === 'intro'" class="course-intro">
            <div class="intro-section">
              <h3>课程介绍</h3>
              <p>本课程是CAAC（中国民用航空局）认证的无人机驾驶初级课程，适合零基础学员。通过本课程的学习，您将：</p>
              <ul>
                <li>掌握无人机飞行的基本原理和操作技能</li>
                <li>了解民用无人机相关法规和安全规范</li>
                <li>获得CAAC认证的无人机驾驶员执照</li>
                <li>具备独立操作小型无人机的能力</li>
              </ul>
            </div>

            <div class="intro-section">
              <h3>适合人群</h3>
              <ul>
                <li>零基础想学习无人机驾驶的学员</li>
                <li>需要考取CAAC无人机驾驶证的从业者</li>
                <li>对无人机技术感兴趣的爱好者</li>
                <li>想要从事无人机相关工作的求职者</li>
              </ul>
            </div>

            <div class="intro-section">
              <h3>课程特色</h3>
              <ul>
                <li>专业讲师一对一指导</li>
                <li>理论与实践相结合的教学方式</li>
                <li>提供完整的考证辅导</li>
                <li>灵活的学习时间安排</li>
                <li>终身制的技术支持服务</li>
              </ul>
            </div>
          </div>

          <div v-if="activeTab === 'catalog'" class="course-catalog">
            <div v-for="(chapter, index) in chapters" :key="index" class="chapter-item">
              <div class="chapter-header" @click="toggleChapter(index)">
                <div class="chapter-left">
                  <span class="chapter-title">{{ chapter.title }}</span>
                  <!-- <span class="chapter-tag" v-if="chapter.tag">{{ chapter.tag }}</span> -->
                </div>
                <span class="chapter-arrow" :class="{ expanded: chapter.expanded }">
                  <img
                    :src="chapter.expanded ? require('@/assets/index/xiala.png') : require('@/assets/index/xiala.png')"
                    alt="arrow" />
                </span>
              </div>
              <div v-show="chapter.expanded" class="chapter-content">
                <div v-for="(lesson, lIndex) in chapter.lessons" :key="lIndex" class="lesson-item">
                  <div class="lesson-left">
                    <span class="lesson-title">{{ lesson.title }}</span>
                    <span class="lesson-tag" v-if="lesson.tag">{{ lesson.tag }}</span>
                  </div>
                  <div class="lesson-right">
                    <span class="lesson-duration" v-if="lesson.status == 1">{{ lesson.duration }}</span>
                    <span class="lesson-duration" v-if="lesson.status == 1">已学习：20%</span>

                    <button class="btn-buy-lesson" v-if="lesson.status == 2">购买课程</button>
                    <button class="btn-buy-lesson" v-if="lesson.status == 1" @click="handleStart">开始学习</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <BaseFooter />
    <RightContact ref="rightContact" />
  </div>
</template>

<script>
import BaseHeader from "@/components/baseHeader.vue";
import BaseFooter from "@/components/baseFooter.vue";
import RightContact from "@/components/rightContact.vue";

export default {
  name: "order",
  components: { BaseHeader, BaseFooter, RightContact },
  data() {
    return {
      navs: ["首页", "新闻", "题库", "资料", "产教课程"],
      activeNav: "登录",
      activeTab: 'catalog',
      tabs: [
        { id: 'intro', name: '课程简介' },
        { id: 'catalog', name: '课程目录' }
      ],
      chapters: [
        {
          title: '1. 认识AI和AI产品经理',
          expanded: true,
          tag: '试听',

          lessons: [
            { title: '1. 什么是人工智能', duration: '45分钟', tag: '可试看', status: 1, },
            { title: '1. 什么是人工智能', duration: '45分钟', tag: '可试看', status: 2 },
            { title: '1. 什么是人工智能', duration: '45分钟', tag: '可试看' },
            { title: '1. 什么是人工智能', duration: '45分钟', tag: '试听' }
          ]
        },
        {
          title: '1. 认识AI和AI产品经理',
          expanded: false,
          tag: '试听',
          status: 2,
          lessons: [
            { title: '1. 什么是人工智能', duration: '45分钟', tag: '可试看' },
            { title: '1. 什么是人工智能', duration: '45分钟', tag: '试听' },
            { title: '1. 什么是人工智能', duration: '45分钟', tag: '试听' },
            { title: '1. 什么是人工智能', duration: '45分钟', tag: '试听' }
          ]
        },
        {
          title: '1. 认识AI和AI产品经理',
          expanded: false,
          tag: '试听',
          lessons: []
        },
        {
          title: '1. 认识AI和AI产品经理',
          expanded: false,
          tag: '试听',
          lessons: []
        }
      ]
    };
  },
  methods: {
    toggleChapter(index) {
      this.chapters.forEach((chapter, i) => {
        if (i === index) {
          this.$set(chapter, 'expanded', !chapter.expanded);
        } else {
          this.$set(chapter, 'expanded', false);
        }
      });
    },
    handleConsult() {
      this.$refs.rightContact.showConsult = true;
    },
    handleStart() {
      this.$router.push({
        path: '/start',

      });

    },
    handlePurchase() {
      this.$router.push({
        path: '/purchase',
        query: { courseId: 'caac-basic' }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.breadcrumb {
  margin: 20px 0;
  font-size: 14px;
  color: #666;
  text-align: left;

  span {
    color: #909399;

    &.separator {
      margin: 0 8px;
      color: #909399;
    }

    &.current {
      color: #1664FF;
    }
  }
}

.course-info {
  display: flex;
  gap: 40px;
  margin-bottom: 40px;
  background: #FFFFFF;
  border-radius: 8px;
  padding: 24px;
  text-align: left;
  box-shadow: 0px 2px 12px 0px #E1E3EB;

  .course-left {
    flex: 1;

    .course-image {
      width: 100%;
      border-radius: 8px;
      object-fit: cover;
    }
  }

  .course-right {
    flex: 1;
    padding: 20px 0;

    .course-title {
      font-size: 24px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 24px;
    }

    .course-price {
      margin-bottom: 24px;

      .price-label {
        font-size: 14px;
        color: #909399;
      }

      .price-amount {
        font-size: 32px;
        color: #F56C6C;
        font-weight: 600;

        &:before {
          content: '¥';
          font-size: 24px;
          margin-right: 4px;
        }
      }
    }

    .course-meta {
      margin-bottom: 32px;

      .meta-item {
        margin-bottom: 16px;

        .meta-label {
          font-size: 14px;
          color: #909399;
        }

        .meta-value {
          font-size: 14px;
          color: #606266;
          margin-left: 8px;
        }
      }
    }

    .course-actions {
      display: flex;
      gap: 16px;

      button {
        height: 40px;
        padding: 0 32px;
        border-radius: 4px;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.3s;

        &.btn-consult {
          background: #FFFFFF;
          border: 1px solid #1664FF;
          color: #1664FF;

          &:hover {
            background: #F5F7FA;
          }
        }

        &.btn-buy {
          background: #1664FF;
          border: none;
          color: #FFFFFF;

          &:hover {
            background: #0052FF;
          }
        }
      }
    }
  }
}

.course-content {
  background: #fff;
  border-radius: 8px;

  .content-tabs {
    display: flex;
    border-bottom: 1px solid #E4E7ED;
    padding: 0 24px;

    .tab-item {
      padding: 16px 0;
      margin-right: 32px;
      font-size: 16px;
      color: #909399;
      cursor: pointer;
      position: relative;

      &.active {
        color: #303133;
        font-weight: 500;

        &:after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 2px;
          background: #1664FF;
        }
      }
    }
  }

  .content-body {
    padding: 24px;

    .chapter-item {
      background: #FFFFFF;
      box-shadow: 0px 2px 12px 0px #E1E3EB;
      border-radius: 12px;
      border: 1px solid #FFFFFF;
      border-radius: 12px;
      margin-bottom: 8px;
      // padding-bottom: 20px;

      .chapter-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        cursor: pointer;
        // background: #F7F8FA;
        border-radius: 4px;



        .chapter-left {
          display: flex;
          align-items: center;
          gap: 8px;

          .chapter-title {
            font-size: 16px;
            color: #303133;
            font-weight: 500;

          }

          .chapter-tag {
            padding: 2px 8px;
            background: #1664FF;
            border-radius: 2px;
            color: #FFFFFF;
            font-size: 12px;
          }
        }

        .chapter-arrow {
          transition: transform 0.3s;

          img {
            width: 24px;
            height: 14px;
          }

          &.expanded {
            transform: rotate(180deg);
          }
        }
      }

      .chapter-content {
        .lesson-item:last-child {
          margin-bottom: 20px;
        }

        .lesson-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 16px;
          border-bottom: 1px solid #F0F0F0;
          background: #F5F7FD;
          border-radius: 8px;
          margin-top: 12px;
          width: 96%;
          margin-left: 2%;

          &:last-child {
            border-bottom: none;
          }

          .lesson-left {
            display: flex;
            // align-items: center;
            gap: 8px;

            .lesson-title {
              font-size: 14px;
              color: #606266;
            }

            .lesson-tag {
              // padding: 2px 8px;
              width: 47px;
              height: 23px;
              display: flex;
              align-items: center;
              justify-content: center;
              background: #1664FF;
              border-radius: 2px;
              color: #FFFFFF;
              font-size: 12px;
            }
          }

          .lesson-right {
            display: flex;
            align-items: center;
            gap: 16px;

            .lesson-duration {
              font-size: 14px;
              color: #909399;
            }

            .btn-buy-lesson {
              padding: 6px 16px;
              background: #1664FF;
              border-radius: 4px;
              color: #FFFFFF;
              font-size: 14px;
              border: none;
              cursor: pointer;

              &:hover {
                background: #0052FF;
              }
            }
          }
        }
      }
    }
  }
}

.course-intro {
  padding: 20px;

  .intro-section {
    margin-bottom: 40px;

    h3 {
      font-size: 20px;
      font-weight: 600;
      color: #333;
      margin-bottom: 20px;
      position: relative;
      padding-left: 12px;

      &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 4px;
        bottom: 4px;
        width: 4px;
        background: #409EFF;
        border-radius: 2px;
      }
    }

    p {
      font-size: 16px;
      color: #666;
      line-height: 1.6;
      margin-bottom: 16px;
    }

    ul {
      list-style: none;
      padding: 0;
      margin: 0;

      li {
        position: relative;
        padding-left: 20px;
        margin-bottom: 12px;
        font-size: 16px;
        color: #666;
        line-height: 1.6;

        &:before {
          content: '';
          position: absolute;
          left: 0;
          top: 10px;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #409EFF;
        }
      }
    }
  }
}
</style>
